<template>
  <view class="editor-box">
    <SpEditor
      placeholder="请输入详情, 先上传图片再进行调整!" 
      @upinImage="upinImage" 
      @exportHtml="exportHtml" 
      class="editor" 
      :toolbar-config="{
        iconSize: '14px',
        keys: ['header', 'H1', 'H2', 'H3', 'H4', 'bold', 'underline', 'align', 'alignLeft', 'alignCenter', 'alignRight', 'date', 'color',               'fontSize', 'fontFamily', 'backgroundColor', 'image', 'undo', 'redo', 'divider', 'clear', 'export']
      }"
    />
  </view>
</template>
<script setup>
  import SpEditor from '@/uni_modules/sp-editor/components/sp-editor/sp-editor.vue'
  import { uploadImgApi } from '@/service/index.js'
  const emit = defineEmits([ 'exportEditor' ])
  const upinImage = (tempFiles, editorCtx) => {
    uni.showLoading({ title: '上传图片中...' })
    tempFiles.forEach((item) => {
      uploadImgApi(item.path).then(res => {
        console.log(res.path, 'popopopo');
        editorCtx.insertImage({
          src: res.path,
          width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
          success: function () {
            uni.hideLoading()
          }
        })
      })
    })
  }
  
  
  const exportHtml = (e) => {
    emit('exportEditor', e)
  }
</script>
<style scoped lang="scss">
  .editor-box {
    .editor {
      background-color: #fff;
      border-radius: 10px;
    }
  }
</style>